<template>
  <a-card :bordered="false" :title="$route.meta.title" :bodyStyle="{ padding: '0 12px' }">
    <a-button v-auth:add slot="extra" type="primary" icon="plus" @click="$refs.form.create()">新建</a-button>
    <a-table rowKey="id" size="middle" :loading="loading" :columns="columns" :dataSource="dataSource" :pagination="pagination" @change="tableChange">
      <a-input-search slot="title" allowClear :maxLength="50" placeholder="角色名称查询" style="width:220px" @search="onSearch" />
      <div slot="action" class="table-action" slot-scope="text,record,index">
        <span v-auth:auth>
          <a @click.stop="$refs.tree.show(record.id)">授权</a>
          <a-divider type="vertical" />
        </span>
        <span v-auth:edit>
          <a @click.stop="$refs.form.update(record)">修改</a>
          <a-divider type="vertical" />
        </span>
        <a-popconfirm v-auth:del :title="`确定删除【${record.name}】吗？`" placement="topRight" @confirm="onDelete(record.id,index)">
          <a class="delete">删除</a>
        </a-popconfirm>
      </div>
      <template slot="status" slot-scope="status,record">
        <a-switch :defaultChecked="Boolean(status)" checkedChildren="启用" unCheckedChildren="停用" :disabled="authDisabled(status)" @change="onChange(record.id,$event)" />
      </template>
    </a-table>
    <sjht-role-form ref="form" @success="onSuccess" />
    <sjht-auth-tree ref="tree" />
  </a-card>
</template>
<script>
import { table, tableAction } from '@/utils/mixins'
import { PageRoleList, DeleteRole, UpdateSelective } from '@/api/manage/role'
import SjhtRoleForm from './modules/form'
import SjhtAuthTree from '../menu/authTree'
export default {
  name: 'RoleList', //角色列表
  mixins: [table, tableAction],
  components: {
    [SjhtRoleForm.name]: SjhtRoleForm,
    [SjhtAuthTree.name]: SjhtAuthTree
  },
  data() {
    return {
      loadApi: PageRoleList,
      deleteApi: DeleteRole,
      updateApi: UpdateSelective
    }
  },
  created() {
    this.columns.unshift({ title: '操作', key: 'operation', width: 135, align: 'center', scopedSlots: { customRender: 'action' } })
    this.columns.push(
      { title: '角色名称', dataIndex: 'name', width: 200, ellipsis: true },
      { title: '角色描述', dataIndex: 'descriptor', width: 300, ellipsis: true },
      { title: '状态', dataIndex: 'status', width: 100, align: 'center', scopedSlots: { customRender: 'status' } },
      { title: '创建时间', dataIndex: 'created', width: 145 },
      { title: '修改时间', dataIndex: 'updated', width: 145 }
    )
  },
  mounted() {
    this.loadData()
  },
  methods: {
    onSearch(v) {
      const name = /[\S]+/.test(v) ? v : undefined
      this.pagination.current = 1
      Object.assign(this.loadParams, { name, page: undefined })
      this.loadData()
    }
  }
}
</script>
